<template>
  <div class='DjProgramShow'>
    <div
      class="musicShowBlock"
      @click="playedSong()"
    >
      <div class="musicIntroduce">
        <div class="musicImg" :style="bgPic">
          <img :src="program.coverUrl +'?param=120y120'" width="100%">
        </div>
        <div class="title">
          <div class="musicName">
            {{ program.name }}
          </div>
          <div class="createTime">
            {{ program.createTime | relativeTime }}
          </div>
        </div>
        <div class="musicDuration">
          {{ program.duration | filterMusicTime }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  name: 'DjProgramShow',
  components: {
    [Toast.name]: Toast
  },
  props: {
    program: {
      required: true,
      type: Object
    },
    index: {
      required: true,
      type: Number
    }
  },
  data () {
    return {
      // style
      bgPic: {
        backgroundSize: 'cover'
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 播放歌曲
    playedSong () {
      Toast.fail('电台功能不可用')
      // this.$store.commit('setPlayedSongObj', this.program)
      // this.$store.commit('setPlayedSongIndex', this.index)
      // // 将该歌曲所在的列表存储到 store 内的播放列表中
      // this.$emit('storagePlayingSongList')
    }
  }
}
</script>
<style lang='less' scoped>
@import "../../styles/common.less";
.DjProgramShow {
  width: inherit;
  background: rgb(245, 245, 245);
  .musicShowBlock {
    height: 60px;
    margin: 12px 15px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 0px 8px rgb(235, 235, 235);
    display: flex;
    overflow: hidden;
    .musicIntroduce {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .musicImg {
        width: 60px;
        height: 60px;
        background-color: rgb(217, 217, 217);
        background-size: cover;
      }
      .title {
        height: 56px;
        width: 225px;
        line-height: 28px;
      }
      .musicName {
        font-size: 14px;
        font-weight: bold;
        color: #383838;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .createTime {
        font-size: 12px;
        color: #acacac;
      }
      .musicDuration {
        font-size: 12px;
        margin-right: 10px;
        color: @themeColor;
      }
    }
  }
}
</style>
